<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="" id="vp">
		<title></title>
		<script>
			var scale=1/window.devicePixelRatio;

			var mstr='initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no';

			document.getElementById('vp').content=mstr;

		</script>
		<script>
			var html = document.querySelector("html");

			html.style.fontSize = html.offsetWidth/6.4 + "px";
			addEventListener("resize",function(){


				html.style.fontSize = html.offsetWidth/6.4 + "px";
			},false);
		</script>
		<script src="js/jquery-1.12.4.js"></script>
		<script src="js/swiper.js"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" href="css/public.css" />
	</head>
	<body>
		<div id="main">
			<div id="loading">
				<ul>
        			<li></li>
            		<li></li>
          		  	<li></li>
            		<li></li>
            		<li></li>
           			<li></li>
        		</ul>
        		<div>你的技能是否已经满载！！</div>
			</div>
			<canvas id="cv"></canvas>
			<div class="swiper-container">
        	<div class="swiper-wrapper">
            	<div class="swiper-slide">
            		<div class="t1">
            			<ul class="li1Child">
            				<li>
                				<p>曾经做为前端开发的你</p>
                    			<p>解决PC兼容性而焦头烂额</p>
                			</li>
                			<li>
                				<p>而今</p>
                    			<p>移动端H5应用疯狂来袭</p>
                			</li>
                			<li>
                				<p>你是否已准备充分</p>
                    			<p>学习新技能</p>
                			</li>
               			 	<li>
                				<p>曾破茧成蝶、重获新生？</p>
                			</li>
            			</ul>
            		</div>
            	</div>
            	<div class="swiper-slide">
            		<div class="t2">
            			<ul class="li2Child">
            				<li></li>
                			<li></li>
                			<li></li>
                			<li></li>
                			<li></li>
                			<li></li>
            			</ul>
            		</div>
            	</div>
            	<div class="swiper-slide">
            		<div class="t3">
            			<div class="li3Child"></div>
            		</div>
            	</div>
            	<div class="swiper-slide">
            		<div class="t4">
            			<ul class="li4Child">
            				<li>transform  transition  rotate  scale  translate  keyframes animation  webkitTransitionEnd webkitAnimationIteration elapsedTime perspective…
            				</li>
                			<li>drawImage lineWidth  strokeStyle  lineCap  globalCompositeOperation  moveTo   lineTo  stroke  arc  getImageData…				</li>
                			<li>audio autoplay loop  paused  play  pause…				</li>
            			</ul>
            		</div>
            	</div>
            	<div class="swiper-slide">
            		<div class="t5"></div>
            	</div>
            	<div class="swiper-slide">
            		<div class="t6"></div>
            	</div>
            	<div class="swiper-slide">
            		<div class="t7"></div>
            	</div>
            	<div class="swiper-slide">
            		<div class="t8"></div>
            	</div>
            
        	</div>
        
    	</div>
			<div id="arrow"></div>
			<div id="music">
    			<audio id="audio1" src="img/music.mp3" preload="auto" loop>			</audio>
    </div>
		</div>
	</body>
	<script src="js/public.js"></script>
		
</html>
